<template>
  <div id="login-warp">
    <div class="warp-body">
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <div style="display: flex;flex-direction: row">
            <el-input v-model="loginForm.captcha" placeholder="验证码" @keyup.enter="login"></el-input>
            <img style="margin-left: 10px" id="verfyImg"  :src="verfyUrl" alt="加载失败" @click="getVerfyCode">
          </div>
        </el-form-item>
        <el-button style="width: 100%" type="primary" @click="login">登录</el-button>

      </el-form>
    </div>
    <div class="title">
      <h2>FAST DEV</h2>
    </div>

  </div>
</template>

<script>
import {getVerfyCode} from '../api/login'
import {login} from '../api/login'
export default {
  name: "LoginView",
  data() {
    return {
      verfyUrl: "",
      loginForm: {
        username: '',
        password: '',
        captchaId: '',
        captcha: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    getVerfyCode() {
      getVerfyCode().then((res) => {
        this.verfyUrl = res.data.data.image;
        this.loginForm.captchaId = res.data.data.captchaId;
      })
    },

    login(){
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          login(this.loginForm).then((res) => {
            if(res.data.code === 200) {
              this.$store.commit("dynamicRouters", res.data.data.menuPermissions);
              sessionStorage.setItem("token",res.headers.authentication);
              // 菜单权限
              sessionStorage.setItem("permissions", JSON.stringify(res.data.data.menuPermissions));
              // 按钮权限
              sessionStorage.setItem("button-permissions", JSON.stringify(res.data.data.buttonPermissions));
              sessionStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
              this.$router.push("/home");
            } else if (res.data.code === 1998) {
              this.$message.error(res.data.msg);
              this.getVerfyCode();
            }
          })
        } else {
          return false;
        }
      });

    },
    createRouter(item) {
      let newRouter = {
        path: item.menuPath,
        name: item.routerName,
        meta: {
          title: item.menuName
        },
        component: () => import(`@/views/${item.routerComponent}.vue`)
      }
      return newRouter;
    }
  },
  created() {
    this.getVerfyCode();
    this.$nextTick(function() {
      this.$refs.name.focus();
    })
  },
  mounted() {

  },
}
</script>

<style scoped>
.title {
  position:absolute;
  right: 280px;
  top: 500px;
  color: white;
}
.warp-body {
  opacity: 0.95;
  border-radius: 10px;
  width: 400px;
  height: 280px;
  position:absolute;
  right: 150px;
  top: 150px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
el-form--label-top .el-form-item__label {
  padding-bottom: 0px !important;
}
#login-warp{
  padding: 5px;
  position:fixed;
  background-image:url("../assets/a.jpg");
  width:100%;
  height:100%;
  background-size:100% 100%;
}
</style>
